<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*文本水平位置*/
            text-align: left;
            /*文本缩进*/
            text-indent: 2rem;
            /*文本装饰线*/
            /*text-decoration: line-through;*/
        }
        div.text2{
           /* 即div中的字符的高度+div和字符上面间距+div和字符下面间距*/
           line-height: 100px;
        }
        div.text3{
            line-height: 160px;
        }
    </style>
</head>
<body>
    <div style="float: left;width: 50%;overflow-y: auto;">
        <div class="text1">
           <h1>文本水平位置属性</h1>
        </div>
        <img src="asserts/行间距.png">
        <div class="text2" style="background-color:yellowgreen;height: 100px">
            文本行间距
        </div>
        <div class="text3" style="background-color:salmon">
            文本行间距
        </div>
        <img width="400px" src="asserts/37415494744720.jpg" style="vertical-align:middle">test
        <br/>
        <img width="400px" src="asserts/37415494744720.jpg" style="vertical-align:text-top">test
        <br/>
        <img width="400px" src="asserts/37415494744720.jpg" style="vertical-align:text-bottom">test
    </div>
    <div style="float: left;width: 50%">
        <table border="1">
            <tr>
                <th>属性值</th>
                <th>解释</th>
            </tr>
            <tr>
                <td>left</td>
                <td>左对齐</td>
            </tr>
            <tr>
                <td>right</td>
                <td>右对齐</td>
            </tr>
            <tr>
                <td>center</td>
                <td>居中对齐</td>
            </tr>
        </table>
    </div>
</body>
</html>
